<template>
  <div class="homePage">
    <header class="header">
      <div class="wraper">
        <a class="homeLogo">
          <img src="~@/assets/images/logo.jpg" alt="logo"/>
        </a>
        <div class="_l-Grid">
          <div class="telBox">
            <span class="_icn"></span>
            <div>
              <p class="_con">xunli-03@163.com</p>
              <p class="_desc">周一~周五,8:00-20:00</p>
            </div>
          </div>
          <div class="mailBox">
            <span class="_icn"></span>
            <div>
              <p class="_con">qq群：815384525</p>
              <p class="_desc">欢迎小程序爱好者交流！</p>
            </div>
          </div>
          <!-- <a class="fr btn" href="">加入代理</a> -->
          <router-link class="fr btn" :to="{ name: 'login' }">管理后台</router-link>
        </div>
      </div>
    </header>
    <nav class="nav">
      <!-- <div class="navWrp">
        <a class="navItm">首页</a>
        <a class="navItm">产品中心</a>
        <a class="navItm">客户案例</a>
        <a class="navItm">定制开发</a>
        <a class="navItm">成为代理</a>
        <a class="navItm">关于我们</a>
        <a class="navItm fr">联系我们</a>
      </div> -->
    </nav>
    <section class="slider">
      <div class="sliderCon">
        <div :class="sliderClsObjA" class="sliderItm is-itm6">
          <div class="_wrap">
            <p class="_tit">合伙人计划</p>
            <div class="_descWrd">
              <p><i class="iconfont icon-chked--circle"></i>&nbsp;&nbsp;小程序全部免费使用，免费使用，免费使用</p>
              <p><i class="iconfont icon-chked--circle"></i>&nbsp;&nbsp;一键生成小程序，无需开发，操作简单</p>
              <p><i class="iconfont icon-chked--circle"></i>&nbsp;&nbsp;3分钟搭建企业小程序官网</p>
              <p><i class="iconfont icon-chked--circle"></i>&nbsp;&nbsp;抢占微信10亿流量红利</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        <div :class="sliderClsObjB" class="sliderItm is-itm1">
          <div class="_wrap">
            <p class="_tit">零售/分销商城</p>
            <p class="_subTit">直面8亿微信用户，一键开展在线电商，三大核心功能助店营收</p>
            <div class="_descWrd1">
              <i class="iconfont icon-pc--hq"></i>
              <p>营销推广、会员管理、门店管理三大核心功能<br/>支持门店自提/门店发货功能</p>
            </div>
            <div class="_descWrd2">
              <i class="iconfont icon-setting--ml"></i>
              <p>支持直营/加盟等门店连锁模式<br/>线上线下一体化经验，助力新零售转型升级</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        <div :class="sliderClsObjC" class="sliderItm is-itm2">
          <div class="_wrap">
            <p class="_tit">商圈业态 — 小程序</p>
            <p class="_subTit">面向同城、商圈、特色街区用户的线上经营，完整的多门店入驻、商家自助后台管理<br/>和低成本引流小程序系统，实现品牌、营收、互动三位一</p>
            <div class="_descWrd">
              <p><i class="iconfont icon-pc--hq"></i>&nbsp;&nbsp;快速搭建在线商城</p>
              <p><i class="iconfont icon-manage"></i>&nbsp;&nbsp;商场、营销、会员等一站式管理服务</p>
              <p><i class="iconfont icon-mail"></i>&nbsp;&nbsp;海量模板，可视化编辑</p>
              <p><i class="iconfont icon-setting"></i>&nbsp;&nbsp;多种营销插件：拼团/秒杀/促销/满减...</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        <div :class="sliderClsObjD" class="sliderItm is-itm3">
          <div class="_wrap">
            <p class="_tit">餐饮外卖 — 小程序</p>
            <p class="_subTit">强大的餐饮一体化应用服务，告别平台的高额抽佣和严苛条款，快速帮商家赚钱</p>
            <div class="_descWrd">
              <p><i class="iconfont icon-pc--hq"></i>&nbsp;&nbsp;完美解决各类餐饮门店的接单/收银/后厨问题</p>
              <p><i class="iconfont icon-takeout"></i>&nbsp;&nbsp;支持订座/堂吃点餐/外卖</p>
              <p><i class="iconfont icon-mail"></i>&nbsp;&nbsp;手机端订单提醒</p>
              <p><i class="iconfont icon-setting"></i>&nbsp;&nbsp;提供客源导入和快捷好用的会员功能</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        <div :class="sliderClsObjE" class="sliderItm is-itm4">
          <div class="_wrap">
            <p class="_tit">酒店旅游 — 小程序</p>
            <div class="_descWrd1">
              <i class="iconfont icon-pc--hq"></i>
              <p>强大的酒店旅游特色功能和应用功能开发，<br/>改善酒店、旅游行业客源过于被动和单一的局面。</p>
            </div>
            <div class="_descWrd2">
              <i class="iconfont icon-setting--ml"></i>
              <p>完美解决预定/登记/支付等酒店服务功能<br/>支持旅游指南/旅游攻略/门票团购等</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        <div :class="sliderClsObjF" class="sliderItm is-itm5">
          <div class="_wrap">
            <p class="_tit">商圈业态 — 小程序</p>
            <p class="_subTit">节省管理成本、提升企业形象，提前锁定消费，鼓励顾客通过<br/>便捷的扩散模式，快速带来潜客。</p>
            <div class="_descWrd">
              <p><i class="iconfont icon-pc--hq"></i>&nbsp;&nbsp;支持在线支付</p>
              <p><i class="iconfont icon-manage"></i>&nbsp;&nbsp;支持到店、上门服务</p>
              <p><i class="iconfont icon-mail"></i>&nbsp;&nbsp;技师预约一对一服务</p>
              <p><i class="iconfont icon-setting"></i>&nbsp;&nbsp;强大的后台系统管理</p>
            </div>
            <a class="_kfBtn">
              <i class="iconfont icon-qq"></i>&nbsp;免费制作
            </a>
          </div>
        </div>
        
      </div>
      <nav class="sliderInx">
        <ul class="clearfix">
           <li>
            <div class="_item is-last" @click="changSilder(1)" :class="sliderInx==1?'is-active':''">
              <span class="_item__icn is-icn6"></span>
              <p class="_item__wrd">合伙人计划</p>
            </div>
          </li>
          <li>
            <div class="_item" @click="changSilder(2)" :class="sliderInx==2?'is-active':''">
              <span class="_item__icn is-icn1"></span>
              <p class="_item__wrd">零售/分销商城</p>
            </div>
          </li>
          <li>
            <div class="_item" @click="changSilder(3)" :class="sliderInx==3?'is-active':''">
              <span class="_item__icn is-icn2"></span>
              <p class="_item__wrd">商圈业态</p>
            </div>
          </li>
          <li>
            <div class="_item" @click="changSilder(4)" :class="sliderInx==4?'is-active':''">
              <span class="_item__icn is-icn3"></span>
              <p class="_item__wrd">餐饮外卖</p>
            </div>
          </li>
          <li>
            <div class="_item" @click="changSilder(5)" :class="sliderInx==5?'is-active':''">
              <span class="_item__icn is-icn4"></span>
              <p class="_item__wrd">酒店旅游</p>
            </div>
          </li>
          <li>
            <div class="_item" @click="changSilder(6)" :class="sliderInx==6?'is-active':''">
              <span class="_item__icn is-icn5"></span>
              <p class="_item__wrd">丽人美业</p>
            </div>
          </li>
         
        </ul>
      </nav>
    </section>
    <section class="section">
      <h3 class="caption">N多流量入口,发现你的小程序</h3>
      <div class="secDiv1">
        <ul class="secGrid1 clearfix">
          <li>
            <div class="disItmA">
              <span class="_icn mbg1"></span>
              <p class="_wrd">附件小程序</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg2"></span>
              <p class="_wrd">搜索查找</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg3"></span>
              <p class="_wrd">朋友圈分享</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg4"></span>
              <p class="_wrd">公众号关联</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg5"></span>
              <p class="_wrd">常用列表</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg6"></span>
              <p class="_wrd">文章推送</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg7"></span>
              <p class="_wrd">扫一扫</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg8"></span>
              <p class="_wrd">支付完成页面</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg9"></span>
              <p class="_wrd">对话分享</p>
            </div>
          </li>
          <li>
            <div class="disItmA">
              <span class="_icn mbg0"></span>
              <p class="_wrd">更多入口</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section class="section">
      <h3 class="caption">小程序的优势</h3>
      <p class="caption--sub">一站式部署小程序资源套件，简化开发、提升效率；更有丰富的小程序模板<br/>满足电商/餐饮/O2O等多场景定制化需求。</p>
      <div class="secDiv2">
        <img src="~@/assets/images/wxapp-ys.jpg"/>
      </div>
    </section>
    <!-- <section class="section">
      <h3 class="caption">我们的优势</h3>
      <p class="caption--sub">骨灰级的技术人员开发，多样的模板，强大的后台系统管理，简单易操作<br/>一起引领实体门店转型互联网</p>
      <div class="secDiv3">
        <div class="secDiv3Wrp clearfix">
          <ul class="secGrid3">
            <li>
              <div class="disItmB">
                <span class="_icn bg1"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg2"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg3"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg4"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg5"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg6"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg7"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
            <li>
              <div class="disItmB">
                <span class="_icn bg8"></span>
                <div class="_lftWrp">
                  <p class="_tit">专业技术团队</p>
                  <p>强大的研发实力，<br/>专业骨灰级的研发技术</p>
                </div>
              </div>
            </li>
          </ul>
          <div class="secDiv3Img">
            <img alt="我们的优势" src="~@/assets/images/wmd-ys.jpg"/>
          </div>
        </div>
      </div>
    </section> -->
    <section class="section--user">
      <h3 class="caption">适用的商户</h3>
      <div class="secDiv4">
        <ul class="secGrid4 clearfix">
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg1"></span>
                </div>
                <p class="_wrd">家具家纺</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg2"></span>
                </div>
                <p class="_wrd">门店</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg3"></span>
                </div>
                <p class="_wrd">美妆</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg4"></span>
                </div>
                <p class="_wrd">生鲜果蔬</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg5"></span>
                </div>
                <p class="_wrd">医疗健康</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg6"></span>
                </div>
                <p class="_wrd">饮茶酒水</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg7"></span>
                </div>
                <p class="_wrd">图像图书</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg8"></span>
                </div>
                <p class="_wrd">服装鞋包</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg9"></span>
                </div>
                <p class="_wrd">蛋糕烘培</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg10"></span>
                </div>
                <p class="_wrd">礼品鲜花</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg11"></span>
                </div>
                <p class="_wrd">日用百货</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg12"></span>
                </div>
                <p class="_wrd">汽车服务</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg13"></span>
                </div>
                <p class="_wrd">教育培训</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg14"></span>
                </div>
                <p class="_wrd">亲子母婴</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg15"></span>
                </div>
                <p class="_wrd">美容养生</p>
              </div>
            </li>
            <li>
              <div class="disItmC">
                <div class="_icnWrp">
                  <span class="_icn bg16"></span>
                </div>
                <p class="_wrd">更多</p>
              </div>
            </li>
          </ul>
      </div>
    </section>
    <section class="section--addus">
      <div class="_wrp">
        <p class="_wrd">对小程序感兴趣吗？</p>
        <!-- <button class="_btn1">免费体验</button> -->
        <button class="_btn2">加入我们</button>
      </div>
    </section>
  </div>
</template>
<style scoped lang="scss">
.slider{
  width: 100%;
}
.sliderCon{
  width: 100%;
  height: 668px;
  min-width: 1200px;
  overflow: hidden;
  position: relative;
}
.sliderItm{
  height: 668px;
  background: center no-repeat;
  width: 100%;
  position: absolute;
  z-index: 1;
  left: -100%;
  &.slideInLft{
    z-index: 2;
    animation: slideInLeft 1s linear;
    left: 0;
  }
  &.slideInRgt{
    z-index: 2;
    animation: slideInRight 1s linear;
    left: 0;
  }
  &.slideOutLft{
    z-index: 2;
    animation: slideOutLeft 1s linear;
    left: 0;
  }
  &.slideOutRgt{
    z-index: 2;
    animation: slideOutRight 1s linear;
    left: 0;
  }
  &.is-active{
    z-index: 3;
    left: 0;
  }
  ._wrap{
    height: 100%;
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  ._tit{
    color: #fff;
    font-size: 52px;
    position: absolute;
  }
  ._subTit{
    color: #fff;
    font-size: 18px;
    position: absolute;
  }
  ._kfBtn{
    height: 48px;
    line-height: 48px;
    color: #fff;
    text-align: center;
    width: 200px;
    position: absolute;
    display: block;
    border: 1px solid #fff;
  }
  &.is-itm1{
    background-image: url(~@/assets/images/home-slider1.jpg);
    ._tit{
      left: 640px;
      top: 100px;
    }
    ._subTit{
      left: 640px;
      top: 190px;
    }
    ._descWrd1,._descWrd2{
      position: absolute;
      left: 640px;
      color: #fff;
      width: 560px;
      .iconfont{
        height: 74px;
        width: 74px;
        border-radius: 100%;
        border: 1px solid #fff;
        font-size: 35px;
        float: left;
        margin-right: 20px;
        text-align: center;
        line-height: 74px;
      }
      p{
        padding: 3px 0;
        font-size: 18px;
        line-height: 34px;
      }
    }
    ._descWrd1{
      top: 250px;
    }
    ._descWrd2{
      top: 370px;
    }
    ._kfBtn{
      left: 640px;
      top: 500px;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._subTit{
        animation: fadeInDown 2s linear;
      }
      ._descWrd1{
        animation: slideInRight 2.5s linear;
      }
      ._descWrd2{
        animation: slideInRight 3s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
  &.is-itm2{
    background-image: url(~@/assets/images/home-slider2.jpg);
    ._tit{
      text-align: center;
      width: 100%;
      left: 0;
      top: 100px;
    }
    ._subTit{
      text-align: center;
      width: 100%;
      left: 0;
      top: 210px;
    }
    ._descWrd{
      position: absolute;
      top: 300px;
      color: #fff;
      left: 458px;
      .iconfont{
        margin-right: 10px;
      }
      p{
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
    ._kfBtn{
      top: 500px;
      left: 50%;
      margin-left: -100px;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._subTit{
        animation: fadeInDown 2s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
  &.is-itm3{
    background-image: url(~@/assets/images/home-slider4.jpg);
    ._tit{
      text-align: center;
      width: 100%;
      left: 0;
      top: 100px;
    }
    ._subTit{
      text-align: center;
      width: 100%;
      left: 0;
      top: 210px;
    }
    ._descWrd{
      position: absolute;
      top: 300px;
      color: #fff;
      left: 458px;
      .iconfont{
        margin-right: 10px;
      }
      p{
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
    ._kfBtn{
      top: 500px;
      left: 50%;
      margin-left: -100px;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._subTit{
        animation: fadeInDown 2s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
  &.is-itm4{
    background-image: url(~@/assets/images/home-slider3.jpg);
    ._tit{
      left: 0;
      width: 100%;
      top: 170px;
      text-align: center;
    }
    ._descWrd1,._descWrd2{
      position: absolute;
      top: 320px;
      color: #fff;
      width: 530px;
      .iconfont{
        height: 74px;
        width: 74px;
        border-radius: 100%;
        border: 1px solid #fff;
        font-size: 35px;
        float: left;
        margin-right: 20px;
        text-align: center;
        line-height: 74px;
      }
      p{
        padding: 3px 0;
        font-size: 18px;
        line-height: 34px;
      }
    }
    ._descWrd1{
      left: 120px;
    }
    ._descWrd2{
      left: 660px;
    }
    ._kfBtn{
      top: 460px;
      left: 50%;
      margin-left: -100px;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._subTit{
        animation: fadeInDown 2s linear;
      }
      ._descWrd1{
        animation: slideInRight 2.5s linear;
      }
      ._descWrd2{
        animation: slideInRight 3s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
  &.is-itm5{
    background-image: url(~@/assets/images/home-slider5.jpg);
    ._tit{
      color: #886c44;
      left: 78px;
      top: 100px;
    }
    ._subTit{
      width: 100%;
      left: 78px;
      top: 210px;
      color: #505050;
    }
    ._descWrd{
      position: absolute;
      top: 300px;
      color: #434444;
      left: 78px;
      .iconfont{
        margin-right: 10px;
      }
      p{
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
    ._kfBtn{
      color: #886c44;
      top: 500px;
      left: 78px;
      border-color: #886c44;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._subTit{
        animation: fadeInDown 2s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
  &.is-itm6{
    background-image: url(~@/assets/images/home-slider6.jpg);
    ._tit{
      color: #fff;
      width: 634px;
      top: 110px;
      padding: 40px 0;
      left: 283px;
      border-bottom: 1px solid #fff;
      text-align: center;
    }
    ._descWrd{
      position: absolute;
      top: 320px;
      left: 150px;
      width: 900px;
      color: #fff;
      p{
        float: left;
        width: 50%;
        font-size: 18px;
        margin-bottom: 25px;
      }
    }
    ._kfBtn{
      top: 468px;
      left: 50%;
      margin-left: -100px;
    }
    &.is-active{
      ._tit{
        animation: fadeInDown 1.5s linear;
      }
      ._kfBtn{
        animation: fadeInDown 3.5s linear;
      }
    }
  }
}
.sliderInx{
  border-bottom: 1px solid #e9e9e9;
  margin: 0 auto;
  padding: 9px 0 14px;
  width: 1200px;
  ul{
    width: 1200px;
    li{
      width: 200px;
      float: left;
    }
  }
  ._item{
    height: 80px;
    border-right: 1px solid #e9e9e9;
    text-align: center;
    position: relative;
    cursor: pointer;
    &.is-active{
      &:after{
        content: "";
        height: 0px;
        width: 100%;
        bottom: -14px;
        left: 0;
        border-bottom: 3px solid #59bcdb;
        display: block;
        position: absolute;
      }
    }
  }
  ._item.is-last{
    border-right: 0 none;
  }
  ._item__icn{
    height: 40px;
    width: 40px;
    display: block;
    background: url(~@/assets/images/home-mbg.png) no-repeat;
    margin: 10px auto 0;
    &.is-icn1{
      background-position: 0 3px;
    }
    &.is-icn2{
      background-position: -40px 3px;
    }
    &.is-icn3{
      background-position: -80px 3px;
    }
    &.is-icn4{
      background-position: -120px 3px;
    }
    &.is-icn5{
      background-position: -160px 3px;
    }
    &.is-icn6{
      background-position: -200px 3px;
    }
  }
  ._item__wrd{
  }
}
.btn{
  color: #59bcdb;
  border: 1px solid #59bcdb;
  line-height: 36px;
  width: 98px;
  text-align: center;
  border-radius: 4px;
}
.header{
  border-bottom: 1px solid #e9e9e9;
  height: 92px;
  width: 100%;
}
.header ._l-Grid{
  float: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 92px;
  .mailBox{
    margin-left: 40px;
  }
  .btn{
    margin-left: 38px;
  }
}
.mailBox{
  display: flex;
  align-items: center;
  ._icn{
    margin-right: 10px;
    height: 22px;
    width: 28px;
    background: url(~@/assets/images/home-mbg.png) no-repeat -124px -287px;
  }
  ._con{
    color: #333;
    font-size: 18px;
    line-height: 22px;
  }
  ._desc{
    font-size: 16px;
    color: #666;
  }
}
.telBox{
  display: flex;
  align-items: center;
  ._icn{
    margin-right: 10px;
    height: 22px;
    width: 28px;
    background: url(~@/assets/images/home-mbg.png) no-repeat -86px -287px;
  }
  ._con{
    color: #333;
    font-size: 18px;
    line-height: 22px;
  }
  ._desc{
    font-size: 16px;
    color: #666;
  }
}
.homeLogo{
  height: 92px;
  line-height: 92px;
  float: left;
}
.homeLogo img{
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.nav{
  width: 100%;
}
.navItm{
  line-height: 74px;
  font-size: 16px;
  padding: 0 20px;
}
.navWrp{
  margin: 0 auto;
  width: 1080px;
  .navItm:hover{
    cursor: pointer;
  }
}
.section--addus{
  height: 320px;
  width: 100%;
  background: url(~@/assets/images/addus-mbg.jpg) center no-repeat;
  ._wrp{
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }
  ._wrd{
    position: absolute;
    left: 20px;
    top: 130px;
    font-size: 48px;
    color: #fff;
  }
  ._btn1,._btn2{
    position: absolute;
    top: 134px;
    line-height: 55px;
    width: 178px;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
  }
  ._btn1{
    right: 270px;
    color: #fff;
    background: #3ae5c4;
  }
  ._btn2{
    right: 20px;
    border: 1px solid #3ae5c4;
    color: #3ae5c4;
    background: transparent;
  }
}
.disItmB{
  text-align: left;
  padding: 22px 0;
  ._icn{
    float: left;
    height: 55px;
    width: 55px;
    margin-top: 5px;
    background: url(~@/assets/images/home-mbg.png) no-repeat;
    &.bg1{
      background-position: 0 -356px;
    }
    &.bg2{
      background-position: -57px -356px;
    }
    &.bg3{
      background-position: -114px -356px;
    }
    &.bg4{
      background-position: -171px -356px;
    }
    &.bg5{
      background-position: 0 -413px;
    }
    &.bg6{
      background-position: -57px -413px;
    }
    &.bg7{
      background-position: -114px -413px;
    }
    &.bg8{
      background-position: -171px -413px;
    }
  }
  ._lftWrp{
    float: left;
    margin-left: 22px;
  }
  ._tit{
    color: #2c2c2c;
    font-size: 20px;
    margin-bottom: 10px;
  }
  ._desc{
    font-size: 15px;
    color: #868686;
    line-height: 22px;
  }
}
.disItmC{
  width: 106px;
  ._icnWrp{
    background-color: #fff;
    height: 106px;
    width: 106px;
    border-radius: 50%;
    padding: 23px;
  }
  ._icn{
    background: url(/static/img/home-mbg.a5da1fd.png) no-repeat;
    height: 60px;
    width: 60px;
    display: block;
    &.bg1{
      background-position: 0 -470px;
    }
    &.bg2{
      background-position: -60px -470px;
    }
    &.bg3{
      background-position: -120px -470px;
    }
    &.bg4{
      background-position: -180px -470px;
    }
    &.bg5{
      background-position: 0 -530px;
    }
    &.bg6{
      background-position: -60px -530px;
    }
    &.bg7{
      background-position: -120px -530px;
    }
    &.bg8{
      background-position: -180px -530px;
    }
    &.bg9{
      background-position: 0 -590px;
    }
    &.bg10{
      background-position: -60px -590px;
    }
    &.bg11{
      background-position: -120px -590px;
    }
    &.bg12{
      background-position: -180px -590px;
    }
    &.bg13{
      background-position: 0 -650px;
    }
    &.bg14{
      background-position: -60px -650px;
    }
    &.bg15{
      background-position: -120px -650px;
    }
    &.bg16{
      background-position: -180px -650px;
    }
  }
  ._wrd{
    margin: 12px;
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}
.secDiv4{
  width: 1056px;
  margin: 0 auto;
}
.secGrid4{
  width: 1056px;
  li{
    padding: 25px 13px;
    float: left;
    width: 12.5%;
  }
}
.section--user{
  background: #7c6aa6;
  padding: 40px 0;
  text-align: center;
  .caption{
    color: #fff;
  }
}
.secDiv3Wrp{
  margin: 0 auto;
  width: 1200px;
}
.secGrid3{
  padding: 9px 0;
  height: 538px;
  width: 870px;
  float: left;
  li{
    float: left;
    height: 130px;
    width: 50%;
  }
}
.secDiv3Img{
  float: left;
  height: 538px;
  width: 330px;
}
.secDiv1{
  margin: 0 auto;
  width: 1100px;
}
.secGrid1 li{
  float: left;
  width: 20%;
  padding: 20px;
}
.disItmA{
  height: 180px;
  width: 180px;
  border: 1px solid #dcdcdc;
  border-radius: 24px;
  ._icn{
    height: 80px;
    width: 80px;
    margin: 30px auto 10px;
    display: block;
    background: url(/static/img/home-mbg.a5da1fd.png) no-repeat;
    &.mbg1{
      background-position: 0px -37px;
    }
    &.mbg2{
      background-position: -80px -37px;
    }
    &.mbg3{
      background-position: -160px -37px;
    }
    &.mbg4{
      background-position: 0px -117px;
    }
    &.mbg5{
      background-position: -80px -117px;
    }
    &.mbg6{
      background-position: -160px -117px;
    }
    &.mbg7{
      background-position: 0px -197px;
    }
    &.mbg8{
      background-position: -80px -197px;
    }
    &.mbg9{
      background-position: -160px -197px;
    }
    &.mbg0{
      background-position: 0px -275px;
    }
  }
  ._wrd{
    text-align: center;
    font-size: 18px;
  }
}
.homePage{
  // border-top: 40px solid #7c6aa6;
  // padding-bottom: 40px;
  width: 100%;
}
.wraper{
  width: 1200px;
  margin: 0 auto;
}
.section{
  text-align: center;
}
.caption{
  font-size: 40px;
  margin: 40px 0 10px;
  color: #000;
  font-weight: normal;
}
.caption--sub{
  font-size: 15px;
  color: #666;
  line-height: 24px;
}
.secDiv2 img{
  display: block;
  margin: 0 auto;
}
.secDiv3{
  background: #f7f7f7;
  width: 100%;
  margin: 40px 0 12px;
  overflow: hidden;
}
</style>
<script>
export default {
  data () {
    return {
      sliderInx: 1,
      sliderInLft: -1,
      sliderInRgt: -1,
      sliderOutLft: -1,
      sliderOutRgt: -1
    }
  },
  created () {
  },
  computed: {
    sliderClsObjA: function () {
      return {
        'is-active': this.sliderInx === 1,
        'slideInLft': this.sliderInLft === 1,
        'slideInRgt': this.sliderInRgt === 1,
        'slideOutLft': this.sliderOutLft === 1,
        'slideOutRgt': this.sliderOutRgt === 1
      }
    },
    sliderClsObjB: function () {
      return {
        'is-active': this.sliderInx === 2,
        'slideInLft': this.sliderInLft === 2,
        'slideInRgt': this.sliderInRgt === 2,
        'slideOutLft': this.sliderOutLft === 2,
        'slideOutRgt': this.sliderOutRgt === 2
      }
    },
    sliderClsObjC: function () {
      return {
        'is-active': this.sliderInx === 3,
        'slideInLft': this.sliderInLft === 3,
        'slideInRgt': this.sliderInRgt === 3,
        'slideOutLft': this.sliderOutLft === 3,
        'slideOutRgt': this.sliderOutRgt === 3
      }
    },
    sliderClsObjD: function () {
      return {
        'is-active': this.sliderInx === 4,
        'slideInLft': this.sliderInLft === 4,
        'slideInRgt': this.sliderInRgt === 4,
        'slideOutLft': this.sliderOutLft === 4,
        'slideOutRgt': this.sliderOutRgt === 4
      }
    },
    sliderClsObjE: function () {
      return {
        'is-active': this.sliderInx === 5,
        'slideInLft': this.sliderInLft === 5,
        'slideInRgt': this.sliderInRgt === 5,
        'slideOutLft': this.sliderOutLft === 5,
        'slideOutRgt': this.sliderOutRgt === 5
      }
    },
    sliderClsObjF: function () {
      return {
        'is-active': this.sliderInx === 6,
        'slideInLft': this.sliderInLft === 6,
        'slideInRgt': this.sliderInRgt === 6,
        'slideOutLft': this.sliderOutLft === 6,
        'slideOutRgt': this.sliderOutRgt === 6
      }
    }
  },
  methods: {
    changSilder (index) {
      if (this.sliderInx > index) {
        this.sliderOutLft = -1
        this.sliderInRgt = -1
        this.sliderOutRgt = this.sliderInx
        this.sliderInLft = index
        this.sliderInx = index
      }
      if (this.sliderInx < index) {
        this.sliderOutLft = this.sliderInx
        this.sliderInRgt = index
        this.sliderOutRgt = -1
        this.sliderInLft = -1
        this.sliderInx = index
      }
    }
  }
}
</script>
